<template>
	<div class="shopcart">
		<div class="shopcart_header">
			<p>购物车</p>
			<router-link tag="button" to="/cart">完成</router-link>
		</div>
		<div class="shopcart_main" v-for="data in list">
			<div class="container">
				<p class="checkall"></p>
				<div class="container_left">
					<img src="../assets/images/gou_29.png" />
				</div>
				<div class="container_right">
					<p>{{data.shopName}}</p>
					<p>颜色分类:黑色;尺寸:***</p>
					<p>
						<span>劵后￥{{data.shopPrice.toFixed(2)}}</span>
						<span>￥{{data.shopOldPrice.toFixed(2)}}</span>
					</p>
				</div>

			</div>
			<div class="shopcart-footer">
				<button>领券立减20元</button>
				<carControl :data="data"></carControl>
			</div>
			<div class="del">
				<ul>
					<li>
						<p class="checkall2"></p>
						<p class="all">全选</p>
					</li>
					<!--<li class="sum">合计: ￥{{total.toFixed(2)}}</li>-->
					<li><button class="collect">加入收藏</button><button class="delete">删除</button></li>
				</ul>
			</div>
		</div>
		<my-footer></my-footer>
	</div>
</template>
<script>
	import carControl from './carcontrol';
	export default {
		data() {
			return {
				bool: true,
				list: [{
					id: 1,
					count: 1,
					shopName: "Metabolic酵素x酵母精华粒 减肥排毒60粒",
					shopPrice: 219,
					shopOldPrice: 596
				}, {
					id: 2,
					shopName: "Metabolic酵素x酵母精华粒 减肥排毒60粒",
					count: 1,
					shopPrice: 219,
					shopOldPrice: 596
				}],
				datas: []
			}
		},
		created() {
			console.log(this.$route.path);
			if(this.$route.path === '/tab1') {
				this.bool = false;
			}
			//			var url="http://develop.jhjvip.cn:8080/mall/mobile/users/myshoppingcart?token=201801151748702557ced06d42d071478cb6a1ef085e175f2a&appId=gzh"
			//			axios.post(url,Qs.stringify).then(res=>{
			//				console.log(res.data)
			//			})
		},
		computed: {
			count: function() {
				var count = 0;
				for(var i in this.list) {
					count += parseInt(this.list[i].count);
				}
				return num;
			},
			total: function() {
				var total = 0;
				for(var i in this.list) {
					total += this.list[i].count * (this.list[i].shopPrice);
				}
				return total;
			}
		},
		components: {
			carControl
		},
		methods: {}

	}
</script>

<style scoped="scoped">
	body {
		/*font-size: 10px;*/
		background-color: #f2f2f2;
	}
	
	ul li {
		list-style: none;
	}
	
	.shopcart {
		width: 100%;
		height: 100%;
		background-color: #f2f2f2;
	}
	
	.checkall {
		border-radius: 100%;
		border: 1px solid #989898;
		height: 0.5rem;
		margin-left: 0.2rem;
		margin-right: 0.2rem;
		width: 0.5rem;
	}
	
	.shopcart_header {
		width: 100%;
		height: 1.2rem;
		border-bottom: 1px solid gainsboro;
		display: flex;
		align-items: center;
		background: white;
		justify-content: space-between;
	}
	
	.shopcart_header p {
		margin-left: 40%;
		font-size: 0.4rem;
		font-weight: bold;
	}
	
	.shopcart_header button {
		width: 16%;
		border: 1px solid gray;
		border-radius: 3px;
		background-color: white;
		margin-right: 12%;
		background-color: white;
	}
	
	.shopcart_main {
		width: 100%;
		height: auto;
		background-color: white;
		border-top: 1px solid gainsboro;
		border-bottom: 1px solid gainsboro;
		margin-top: 0.2rem;
	}
	
	.shopcart-footer {
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin-top: -0.1rem;
		border-top: 1px solid gainsboro;
		height: 1.2rem;
	}
	
	.shopcart-footer button {
		width: 32%;
		border: 1px solid #ff2040;
		height: 0.7rem;
		color: #ff2040;
		border-radius: 5px;
		margin-top: 0.22rem;
		background: white;
	}
	
	.shopcart .shopcart_main .shopcart_title {
		width: 98%;
		height: 1rem;
		border-bottom: 1px solid #E6E6E6;
		display: flex;
		align-items: center;
		margin-left: 2%;
	}
	
	.shopcart .shopcart_main .shopcart_title p {
		margin-left: 0.2rem;
	}
	
	.container {
		display: flex;
		width: 98%;
		/*margin-left: 2%;*/
		align-items: center;
	}
	
	.container_left {
		width: 28%;
		height: 2.1rem;
		border: 1px solid #E6E6E6;
		/*margin-left: 0.3rem;*/
	}
	
	.container_left img {
		width: 100%;
		height: 100%;
		margin-top: 14%;
	}
	
	.container_right {
		width: 56%;
		height: 3rem;
		margin-left: 0.4rem;
	}
	
	.container_right>p:first-child {
		font-size: 0.35rem;
		line-height: 0.4rem;
		margin-top: 0.6rem;
		word-break: break-all;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	
	.container_right>p:nth-child(2) {
		font-size: 0.27rem;
		/*margin-top: -0.3rem;*/
		color: #808080;
	}
	
	.container_right>p:nth-child(3)>span:first-child {
		color: red;
		font-size: 0.4rem;
		margin-top: -0.3rem;
	}
	
	.container_right>p:nth-child(3)>span:last-child {
		color: #808080;
		text-decoration: line-through;
	}
	
	.cartcontrol {
		width: 25%;
		display: flex;
		margin-top: 0.23rem;
	}
	
	.sum {
		color: red;
		width: 100%;
		margin-left: 10%;
	}
	
	.del {
		width: 100%;
		position: fixed;
		bottom: -0.3rem;
		z-index: 999;
	}
	
	.del ul {
		display: flex;
		justify-content: flex-start;
		border: 1px solid #ccc;
		height: 11vh;
	}
	
	.del li {
		display: flex;
		justify-content: space-around;
		width: 50%;
		height: 0.95rem;
		line-height: 11vh;
	}
	
	.checkall2 {
		margin-top: 4vh;
		width: 0.4rem;
		height: 0.4rem;
		display: block;
		border: 1px solid #555555;
		margin-left: -1.5rem;
	}
	
	.all {
		line-height: 0.65rem;
		margin-left: -3rem;
		font-size: 0.4rem;
	}
	
	.collect {
		width: 100%;
		height: 0.8rem;
		margin-left: -1rem;
		margin-top: 0.3rem;
		background: white;
		border-radius: 10px;
		border: 1px solid gray;
		line-height: 0.8rem;
		margin-right: 0.2rem;
	}
	
	.delete {
		width: 80%;
		background: white;
		height: 0.8rem;
		color: #ff2040;
		border-radius: 10px;
		margin-top: 0.3rem;
		line-height: 0.8rem;
		border: 1px solid #ff2040;
		margin-right: 0.2rem;
	}
</style>